<template>
  <el-card class="box-card">
    <template #header>
      <span>
        医疗数据——哮喘诱因
        <icon-help title="医疗数据——哮喘诱因" />
      </span>
    </template>
    <div ref="chartRef" :style="{ width: width, height: height }"></div>
  </el-card>
</template>
<script lang="ts" setup>
  import { nextTick, onMounted, Ref, ref, watch } from 'vue'
  import { useECharts } from '@/hooks/web/useECharts'
  import { dataTool, EChartsOption } from 'echarts'
  import { useStore } from 'vuex'
  import type { AsthmaInducement } from '@/store/modules/statistics'
  import iconHelp from '../icon-help/index.vue'
  const animationDuration = 300
  const chartRef = ref<HTMLDivElement | null>(null)
  const { setOptions, getInstance, resize } = useECharts(
    chartRef as Ref<HTMLDivElement>,
    'macarons'
  )

  const props = defineProps({
    data: {
      type: Object,
      default() {
        return {}
      },
    },
    width: {
      // eslint-disable-next-line no-undef
      type: String as PropType<string>,
      default: '100%',
    },
    height: {
      // eslint-disable-next-line no-undef
      type: String as PropType<string>,
      default: '300px',
    },
    customStyle: {
      // '' :'shadow'
      type: Object,
      default() {
        return {
          isBarShadow: null,
          axisLabelColor: 'gray',
        }
      },
    },
    customConfig: {
      type: Object,
      default: {
        formatterUnit: null,
      },
    },
  })

  const store = useStore()
  watch(
    () => store.getters.asthmaInducement,
    (val) => {
      if (val) {
        const { xAxisData, yAxisData, data } = useInitData(val)
        const { isBarShadow, axisLabelColor } = props.customStyle
        console.log('axisLabelColor =' + axisLabelColor)
        const { formatterUnit } = props.customStyle
        const seriesDataTmp = {
          tooltip: {
            trigger: 'axis',
            backgroundColor: 'rgba(255,255,255,0.8)',
            axisPointer: {
              type: isBarShadow ? '' : 'shadow',
            },
            formatter: (params: any) => {
              return (
                params[0].name +
                '<br/>' +
                params[0].marker +
                ' ' +
                params[0].name +
                ' 共' +
                params[0].value +
                '人'
              )
            },
          },
          // 控制上下左右边距的
          grid: {
            left: '2%',
            right: '5%',
            bottom: '5%',
            top: '10%',
            containLabel: true,
          },
          // 不是横坐标
          xAxis: {
            type: xAxisData ? 'category' : 'value',
            data: xAxisData,
            axisLabel: {
              interval: 0, // 强制显示完整
              rotate: -20, //倾斜度 -90 至 90 默认为0
              fontSize: 11,
              color: axisLabelColor,
            },
          },
          yAxis: {
            type: yAxisData ? 'category' : 'value',
            data: yAxisData,
            axisLabel: {
              interval: 0, // 强制显示完整
              // rotate: -20,//倾斜度 -90 至 90 默认为0
              fontSize: 11,
              color: axisLabelColor,
            },
          },
          series: [
            {
              cursor: isBarShadow ? 'default' : '', // 不显示小手
              name: '数量',
              type: 'bar',
              stack: 'vistors',
              barWidth: '60%',
              data: data,
              animationDuration,
            },
          ],
        }
        setOptions(seriesDataTmp as EChartsOption)
      }
    },
    { immediate: true }
  )

  watch(
    () => store.getters.sidebar.opened,
    async (val) => {
      // console.log('asthmaInducement size change')
      // await nextTick()
      setTimeout(() => {
        resize()
      }, 500)
    },
    { immediate: true }
  )
  const emit = defineEmits(['select'])
  onMounted(() => {
    const myChart = getInstance()
    console.log('myChart =' + myChart)
    myChart?.on('click', function (params) {
      const { data, dataIndex } = params as {
        data: { id: number; name: string }
        dataIndex: number
      }
      emit('select', { name: '哮喘诱因列表', triggers: data.id })
    })
  })

  function useInitData(initData: AsthmaInducement): {
    xAxisData: String[]
    data: any
    yAxisData: null
  } {
    const {
      cold,
      strenuousExercise,
      yellLaugh,
      cryScream,
      sweetRefrigeration,
      weather,
      animal,
      smell,
    } = initData
    const xAxisData = [
      '感冒',
      '剧烈运动',
      '大叫大笑',
      '哭闹',
      '进食甜食或冷冻食品饮料',
      '气候变化',
      '接触动物',
      '闻到浓烈的气味',
    ]
    const data = [
      { value: cold, name: '感冒', id: 0 },
      { value: strenuousExercise, name: '剧烈运动', id: 1 },
      { value: yellLaugh, name: '大叫大笑', id: 2 },
      { value: cryScream, name: '哭闹', id: 3 },
      { value: sweetRefrigeration, name: '进食甜食或冷冻食品饮料', id: 4 },
      { value: weather, name: '气候变化', id: 5 },
      { value: animal, name: '接触动物', id: 6 },
      { value: smell, name: '闻到浓烈的气味', id: 7 },
    ]
    return { xAxisData, data, yAxisData: null }
  }
</script>
<style lang="scss" scoped>
  .box-card {
    // width: 50%;
    margin-bottom: 22px;
  }
</style>
